<template>
  <view>
    <view class="goods-item">
      <!-- 左边图片区域 -->
      <view class="item-left-goods">
        <!-- 勾选状态 -->
          <radio :checked="item.goods_state" color="#c00000" @click="clickRadio(item)" v-if="showRadio" />
        <image :src="item.goods_small_logo|| defaultimg"></image>
      </view>
      <!-- 右边标题价格区 -->
      <view class="item-right-goods">
        <view class="goods-name">{{item.goods_name}}</view>
        <view class="goods-info-box">
          <view class="goods-price">{{item.goods_price | tofixed}} </view>
          <!-- 商品数量区 -->
          <uni-number-box v-if="showNum" :value="item.goods_count" min="1" @change="numChange"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      item:{
        type:Object,
        default:{},
      },
      showRadio:{
        type:Boolean,
        default:false
      },
      showNum:{
        type:Boolean,
        default:false
      }
    },
    name:"my-goods",
    data() {
      return {
        defaultimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-73883a5c0edf882bde2bb215020bcd94_1200x500.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650703545&t=88a59b7f8f0828e7751cc6952e8f7dce'
        
      };
    },
    filters:{
      tofixed(num) {
        return Number(num).toFixed(2)
      }
    },
    methods:{
      clickRadio(item){
        this.$emit('addCart',{
          goods_id:item.goods_id,
          goods_state:!item.goods_state
        })
      },
      numChange(newval){
        this.$emit('numChangeHandler',{
          goods_id : this.item.goods_id,
          goods_count:+newval,
        })
      }
    }
  }
</script>

<style lang="scss">
  .goods-item {
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;

    .item-left-goods {
      margin-right: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      image {
        width: 100px;
        height: 100px;
        display: block;
      }
    }

    .item-right-goods {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
      }

      .goods-price {
        font-size: 16px;
        color: #C00000;
      }
    }
    .goods-info-box {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
